<template>
  <div class="lg:flex">
    <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml6 flex flex-col justify-center md:mt0 mt2">
      <h1 class="md:text-lg text-md">欢迎你, {{ userinfo.real_name }}</h1>
      <span class="text-secondary"> {{ userinfo.role_name }} </span>
    </div>
    <div class="flex flex-1 justify-end md:mt0 mt4"> </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import headerImg from '@/assets/images/header.jpg';

  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);
</script>
